<template>
  <div class="calendar-box">
    <van-cell title="选择日期安排课程" :value="date" @click="show = true" />
    <van-calendar v-model="show" @confirm="onConfirm" />
    <!-- <van-calendar v-model="show" :show-confirm="false" /> -->
    <div class="big-box">当日暂无课程安排</div>
  </div>
</template>

<script>
export default {
  name: "Calendar",
  data() {
    return {
      date: "",
      show: false,
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
  },
};
</script>


<style>
.calendar-box .van-cell {
  width: 100%;
  font-size: 20px;
}
.calendar-box .big-box {
  width: 100%;
  height: 1.2rem;
  text-align: center;
  line-height: 1.2rem;
  color: #a3a3a3;
  border-radius: 0 0 0.2rem 0.2rem;
  box-shadow: 10px 10px 20px 10px #a3a3a3;
}
</style>